import { Component } from 'react'
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import Taro, { } from "@tarojs/taro"

export default class CustomSwiper extends Component{

    constructor(){
        super(...arguments)
        this.state = {
            // 滑动广告
            swiperList: [
                {
                    id: "1",
                    name: "1",
                    src: "https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg"
                },
                {
                    id: "2",
                    name: "2",
                    src: "https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg"
                },
                {
                    id: "3",
                    name: "3",
                    src: "https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg"
                },
            ]
        }
    }

    /**
     * 组件将要渲染时，加载出通告栏目的信息。
     */
    async componentWillMount(){
        try{
            const res = await Taro.request({
                // url: '/api/v1/freerdbj/fwtm/aoam/acceptorderback/query/1', //仅为示例，并非真实的接口地址
                url: 'http://10.161.128.18:2779/freerdbj/fwtm/aoam/acceptorderback/query/1',
                data: {
                    // x: '',
                    // y: ''
                },
                header: {
                    'content-type': 'application/json' // 默认值
                },
                method: "GET"
            })
            // 有后端请求时，需要放行。
            // this.setState({
            //     swiperList: res.data.data
            // });
        }catch{
            Taro.showToast({
                title: "载入远程数据错误"
            })
        }
        console.log(this.state.swiperList)
    }

    render(){
        const { swiperList } = this.state;
        return(
            <View>
                <Swiper
                    className='test-h'
                    indicatorColor='#999'
                    indicatorActiveColor='#333'
                    vertical={false}
                    circular
                    indicatorDots
                    autoplay>
                        {swiperList?swiperList.map(( item, index ) => (
                            <SwiperItem>
                                <View>
                                    <Image style="width:auto;height:auto;" src={item.src} />
                                </View>
                            </SwiperItem>
                        )):""}
                </Swiper>
            </View>
        )
    }
}